<template>
    <div>
<h2>房价添加</h2>
<table class="table">
    <tbody>
        <tr>
            <td>房型名称</td>
            <td>
             <select v-model="model.TypeName">
             
                <option value="商务房">商务房</option>
                <option value="大床房">大床房</option>
                <option value="家庭房">家庭房</option>
                <option value="情侣房">情侣房</option>
             </select>
            </td>
        </tr>


        <tr>
            <td>价格</td>
            <td>
                <input type="text" v-model="model.Price">
            </td>
        </tr>


        <tr>
            <td>房价名称</td>
            <td>
                <select v-model="model.Name">
                <option value="">请选择</option>
                <option value="节假日">节假日</option>
                <option value="旅游日">旅游日</option>
                <option value="活动日">活动日</option>
             </select>
            </td>
        </tr>



        <tr>
            <td>房量数量</td>
            <td>
                <input type="text" v-model="model.HouseNumber">
            </td>
        </tr>



        <tr>
            <td>早餐数量</td>
            <td>
                <input type="text" v-model="model.BreakfastNumber">
            </td>
        </tr>



        <tr>
            <td>人数数量</td>
            <td>
                <input type="text" v-model="model.PersonNumber">
            </td>
        </tr>


   
        <tr>
            <td>开始时间</td>
            <td>
                <input type="date" v-model="model.BenginTime">
            </td>
            
        </tr>


        <tr>
            <td>结束时间</td>
            <td>
                <input type="date" v-model="model.EenTime">
            </td>
        </tr>


        <tr>
            <td>门店名称</td>
            <td>

                <select v-model="model.ShopName">
                <option value="">请选择</option>
                <option value="奥斯卡酒店">奥斯卡酒店</option>
                <option value="小金人酒店">小金人酒店</option>
                <option value="红桃A酒店">红桃A酒店</option>
                <option value="贸易酒店">贸易酒店</option>
             </select>
            </td>
        </tr>


        <tr>
            <td>房价计划图标</td>
            <td>
                <input type="file" @change="changeImg">
                <img :src="model.Photo" width="100" height="100">
            </td>
        </tr>


        <tr>
            <td>房价计划状态</td>
            <td>
                <input type="radio" name="state" value="1"  v-model="model.State">上架
                <input type="radio" name="state"  value="0" v-model="model.State">下架
            </td>
        </tr>


        <tr>
            <td></td>
            <td>
                <input type="button" value="添加" class="btn btn-success" @click="ok">
               
            </td>
        </tr>
    </tbody>
</table>



</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
 import axios from 'axios';
 import { useRouter ,useRoute} from 'vue-router';
 const router=useRouter();
 const  route=useRoute();


 //图片上传
 const changeImg = (e: any) => {
    //将文件转成FormData格式
    var obj = e.target.files[0];
    var f = new FormData();
    f.append('file', obj);
    //发送网络请求完成上传
    axios({
      url: '/api/Commons/UpoadImgs',
      method: 'post',
      data: f,
    })
      .then((res) => {
        console.log(res);
        //上传成功   1.成功的图片地址存储  2.预览图片
        model.Photo = 'https://localhost:7291' + res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  };



 //定义变量
let model=reactive({
  "TypeName": '',
  "Price": '',
  "Name": '',
  "HouseNumber": '',
  "BreakfastNumber": '',
  "PersonNumber": '',
  "BenginTime": '',
  "EenTime": '',
  "ShopName": '',
  "Photo": '',
  "State": 1
})



//添加
const ok=()=>{
axios({
url: '/api/HousePrice/HousePriceAdd',
method: 'post',
data: model,
})

.then((res)=>{
console.log(res);
if(res.data>0){
    alert('添加成功');
    router.push('/housePriceList')
    return;
}
else{
    alert('添加失败');
    return;
}
})
.catch((ree)=>{
console.log(ree);
})

}




</script>

<style scoped>

</style>